<template>
    <div ref="myMap" style="width:100%;height:680px" />
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import { geoJson, geoGpsMap, geoCoordMap, colors, colorIndex, randomNum } from './map'
  export default {
    name: 'MyRadar',
    data: () => ({
      myEcharts: {}
    }),
    watch: {
      list: {
        deep: true
        // handler(newVal) {
        //   // const { series: [{ data }] } = radarData
        //   data[0] = { value: newVal.user_woman, name: '女' }
        //   data[1] = { value: newVal.user_man, name: '男' }
        //   this.myEcharts.setOption(radarData)
        // }
      }
    },
    mounted() {
      this.myEcharts = echarts.init(this.$refs.myMap)
      var year = ['2019', '2020', '2021', '2022', '2023']
      var mapData = [
        [],
        [],
        [],
        [],
        [],
        []
      ]
  
      /* 柱子Y名称*/
      var categoryData = []
      var barData = []
      for (var key in geoCoordMap) {
        categoryData.push(key)
        mapData[0].push({
          'year': '2014',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[1].push({
          'year': '2015',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[2].push({
          'year': '2016',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[3].push({
          'year': '2017',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[4].push({
          'year': '2018',
          'name': key,
          'value': randomNum(100, 300)
        })
      }
      for (var i = 0; i < mapData.length; i++) {
        barData.push([])
        for (var j = 0; j < mapData[i].length; j++) {
          barData[i].push(mapData[i][j].value)
        }
      }
  
      echarts.registerMap('china', geoJson)
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }

  
      const optionXyMap01 = {
        timeline: {
          data: year,
          axisType: 'category',
          autoPlay: true,
          playInterval: 3000,
          left: '10%',
          right: '8%',
          bottom: '-13%',
          width: '80%',
          //  height: null,
          label: {
            normal: {
              textStyle: {
                color: '#ddd'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          }
  
        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          grid: {
            right: '3%',
            top: '15%',
            bottom: '10%',
            width: '20%'
          },
          tooltip: {
            trigger: 'axis', // hover触发器
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.1)' // hover颜色
              }
            }
          },
          geo: {
            show: true,
            map: 'china',
            roam: true,
            zoom: 1,
            center: [105, 35],
            label: {
              emphasis: {
                show: false
              }
            },

          }
        },
        options: []
  
      }
      for (var n = 0; n < year.length; n++) {
        optionXyMap01.options.push({
          title: [{},
          {
            id: 'statistic',
            textStyle: {
              color: '#fff',
              fontSize: 28
            }
          }
          ],
          
          series: [
            // 未知作用
            {
              // 文字和标志
              name: 'light',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(mapData[n]),
              symbolSize: function(val) {},
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                },
              }
            },
            // 地图？
            {
              type: 'map',
              map: 'china',
              geoIndex: 0,
              aspectScale: 0.75, // 长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              roam: true,

              animation: false,
              data: mapData
            },
            
          ]
        })
      }
      this.myEcharts.setOption(optionXyMap01)
    },
    methods: {
  
    }
  
  }
  </script>
  
  <style>
  
  </style>
  